<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="用户名" prop="shopName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="主播名" prop="anchorName">
        <el-input
          v-model="queryParams.anchorName"
          placeholder="请输入主播名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="直播间名" prop="shopName">
        <el-input
          v-model="queryParams.livesRoomName"
          placeholder="请输入直播间名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="applyList">
      <el-table-column
        label="用户名"
        align="center"
        prop="userName"
        width="130"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="主播名"
        align="center"
        prop="anchorName"
        width="130"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="直播间名"
        align="center"
        prop="livesRoomName"
        width="130"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="封面" align="center" prop="image" width="100">
        <template slot-scope="scope">
          <oss-image-preview :src="scope.row.cover" :width="50" :height="50" />
        </template>
      </el-table-column>
      <!--      <el-table-column label="视频地址" align="center" prop="image" width="100">
        <template slot-scope="scope">
          <span @click="playVideo(scope.row)" style="cursor: pointer">查看</span>
        </template>
      </el-table-column>-->
      <el-table-column label="直播类型" align="center" prop="liveType" width="140">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.liveType === 0" type="success">娱乐直播</el-tag>
          <el-tag v-if="scope.row.liveType === 1">带货直播</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="任务计划时长"
        align="left"
        prop="plannedTime"
        width="110"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="实际直播时长"
        align="left"
        prop="livesDuration"
        width="110"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="在线人数"
        align="left"
        prop="onlineNumber"
        width="110"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="销售额"
        align="left"
        prop="salesAmount"
        width="110"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="销量"
        align="left"
        prop="salesVolume"
        width="110"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="礼物收益（金币）	"
        align="left"
        prop="giftIncome"
        width="130"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="订单数量"
        align="left"
        prop="orderQuantity"
        width="110"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="状态"
        align="center"
        prop="livesStatus"
        width="100"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.livesStatus === 1">未开播</el-tag>
          <el-tag v-if="scope.row.livesStatus === 2" type="success">直播中</el-tag>
          <el-tag v-if="scope.row.livesStatus === 3" type="success">已结束</el-tag>
        </template>
      </el-table-column>
      <!--      <el-table-column label="更新者" align="left" prop="updateBy" width="110" :show-overflow-tooltip="true"/>-->
      <el-table-column
        label="更新时间"
        align="left"
        prop="updateTime"
        width="160"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">{{$yun.convertTimestamp(scope.row.updateTime)}}</template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="360"
        fixed="right"
      >
        <template slot-scope="scope">
          <div v-show="scope.row.livesStatus === 1">
            <el-button size="mini" type="text" @click="handleUpdate(1,scope.row)">直播前修改</el-button>
          </div>
          <div v-show="scope.row.livesStatus === 2">
            <el-button size="mini" type="text" @click="handleUpdate(2,scope.row)">直播中修改</el-button>

            <el-button size="mini" type="text" @click="closeRoom(scope.row.id)">关闭</el-button>
          </div>
          <div
            v-show="scope.row.livesStatus === 3 && scope.row.platformSettlement === null&&scope.row.liveType === 1"
          >
            <el-button size="mini" type="text" @click="handleUpdate(3,scope.row)">等待店主结算</el-button>
          </div>
          <div v-show="scope.row.livesStatus === 3 && scope.row.liveType === 0">
            <el-button size="mini" type="text" :disabled="true">平台已结算</el-button>
          </div>
          <div>
            <!--   <el-button
              size="mini"
              type="text"
              v-show="scope.row.livesStatus === 3 && scope.row.platformSettlement === null"
            >等待店主结算
            </el-button>-->
            <el-button
              size="mini"
              type="text"
              v-show="scope.row.platformSettlement === 0"
              @click="Settle(scope.row.id)"
            >平台结算</el-button>
            <el-button
              size="mini"
              type="text"
              v-show="scope.row.platformSettlement === 0"
              @click="noQualified(scope.row)"
            >未达标结算</el-button>
            <div
              v-show="scope.row.platformSettlement == 1"
              style="color:#67C23A;font-size: 12px;"
            >平台结算成功</div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog title="未达标原因" :visible.sync="open6" width="30%" class="details-box">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" :rules="formInlineRules">
        <!-- [{noQualifiedInput:[{ required: true, message: '请输入未达标原因', trigger: 'blur' }]}] -->
        <el-form-item label="未达标原因" prop="noQualifiedInput">
          <el-input v-model="formInline.noQualifiedInput" placeholder="请输入未达标原因"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="open6 = false">取 消</el-button>
        <el-button type="primary" @click="noQualifiedInputSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="直播申请详情"
      :visible.sync="open"
      width="1000px"
      append-to-body
      class="details-box"
    >
      <el-card>
        <el-row class="details-row">
          <el-col :span="3">主播姓名：</el-col>
          <el-col :span="20">{{ detailsObj.anchorName }}</el-col>
        </el-row>
        <el-row class="details-row">
          <el-col :span="3">申请开播时间：</el-col>
          <el-col :span="20">{{ parseTime(detailsObj.startLivesTime) }}</el-col>
        </el-row>
        <el-row class="details-row">
          <el-col :span="3">商家名：</el-col>
          <el-col :span="20">{{ detailsObj.shopName }}</el-col>
        </el-row>
        <el-row class="details-row">
          <el-col :span="3">带货任务编号：</el-col>
          <el-col :span="20">{{ detailsObj.shopSellTaskId }}</el-col>
        </el-row>
        <el-row class="details-row">
          <el-col :span="3">商品列表</el-col>
          <!--          <el-col :span="20">{{detailsObj.shopSellTaskId}}</el-col>-->
        </el-row>
        <el-table :data="detailsObj.goodsChildList">
          <el-table-column
            label="商品名称"
            align="center"
            prop="goodsName"
            width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="原价"
            align="center"
            prop="originalPrice"
            width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="现价"
            align="center"
            prop="price"
            width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="商品描述"
            align="center"
            prop="goodsDesc"
            width="120"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="图片"
            align="center"
            prop="image"
            width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <oss-image-preview :src="scope.row.image" width="40" height="40"></oss-image-preview>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-dialog>
    <!--  开播前修改-->
    <el-dialog
      title="直播前"
      :visible.sync="open1"
      width="550px"
      append-to-body
      class="details-box"
      center
      @close="$refs['liveFormBefore'].resetFields()"
    >
      <el-form
        ref="liveFormBefore"
        :model="liveForm"
        label-position="left"
        label-width="140px"
        :rules="rulesBefore"
      >
        <el-form-item label="直播间名" prop>{{liveForm.livesRoomName}}</el-form-item>
        <el-form-item label="直播类型" prop>
          {{sourceType}}
          <!-- <el-select v-model="liveForm.sourceType" clearable placeholder="请选择">
            <el-option
              v-for="item in liveTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>-->
        </el-form-item>
        <el-form-item label="推流地址" prop>
          <!-- <el-input class="modal-input" v-model="liveForm.sourceUrls" placeholder="请输入推流地址" /> -->
          <div v-for="(item,index) in array" :key="index">
            <el-form-item>
              <el-input
                style="width:60%;margin:10px 0;"
                v-model="sourceUrls[index]"
                placeholder="请输入推流地址"
              ></el-input>
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-circle-plus-outline"
                circle
                @click="add"
                style="margin:0 5px;"
              ></el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete-solid"
                circle
                @click="del(index)"
              ></el-button>
              <el-button type="primary" size="mini" @click="expAddress(index)">解析</el-button>
            </el-form-item>
          </div>
        </el-form-item>
        <!--        <el-form-item label="设定推流链接时间" prop="livesRoomName">
          <el-input class="modal-input" v-model="liveForm.timer" placeholder="请输入推流链接时间" type="number" clearable />
          <span>分钟</span>
        </el-form-item>
        <el-form-item label="直播间封面" prop="cover">
          <ImageUpload :limit="1" v-model="liveForm.cover"></ImageUpload>
        </el-form-item>
        <el-form-item label="时间修改" prop="livesRoomName">
          <el-date-picker
            v-model="liveForm.timer"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open1 = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="直播中"
      :visible.sync="open2"
      width="800px"
      append-to-body
      class="details-box"
      @close="selectList = []"
    >
      <el-form ref="liveForm" :model="liveForm" label-position="left" label-width="140px">
        <!-- <el-table v-loading="loading" :data="navList" border @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center"/>
          <el-table-column label="id" align="center" prop="id" width="220" :show-overflow-tooltip="true"/>
          <el-table-column label="水军名称" align="center" prop="userName" width="220" :show-overflow-tooltip="true"/>
        </el-table>
        <pagination
          v-show="navTotal>0"
          :total="navTotal"
          :page.sync="queryParams1.pageNum"
          :limit.sync="queryParams1.pageSize"
          @pagination="navUser"
        />-->
        <el-form-item label="推流地址" prop>
          <div v-for="(item,index) in arraying" :key="index">
            <el-form-item>
              <el-input
                style="width:70%;margin:10px 0;"
                v-model="streamUrl[index]"
                clearable
                placeholder="请输入推流地址"
              ></el-input>
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-circle-plus-outline"
                circle
                @click="adding"
                style="margin:0 5px;"
              ></el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-delete-solid"
                circle
                @click="deling(index)"
              ></el-button>
              <el-button type="primary" size="mini" @click="explainAddress(index)">解析</el-button>
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="推流控制">
          <el-switch
            @change="changeSwitch"
            v-model="streamState"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
        <el-form-item label="水军相关">
          <el-button type="text" @click="jumpToing">【水军弹幕】</el-button>
          <el-button type="text" @click="jumpToing">【水军礼物】</el-button>
          <el-button type="text" @click="jumpToing">【水军下单】</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
        <el-button @click="open2 = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="直播后"
      :visible.sync="open3"
      width="500px"
      append-to-body
      class="details-box"
      center
      @close="$refs['liveFormAfter'].resetFields();"
    >
      <el-form
        ref="liveFormAfter"
        :model="liveForm"
        label-position="left"
        label-width="100px"
        :rules="rulesAfter"
      >
        <el-form-item label="在线人数" prop="onlineNumber">
          <el-input
            class="modal-input"
            :min="0"
            type="number"
            v-model="liveForm.onlineNumber"
            placeholder="请输入在线人数"
          />
        </el-form-item>
        <el-form-item label="销售额" prop="salesAmount">
          <el-input
            class="modal-input"
            :min="0"
            type="number"
            v-model="liveForm.salesAmount"
            placeholder="请输入销售额"
          />
        </el-form-item>
        <el-form-item label="商品销量" prop="salesVolume">
          <el-input
            class="modal-input"
            :min="0"
            type="number"
            v-model="liveForm.salesVolume"
            placeholder="请输入商品销量"
          />
        </el-form-item>
        <el-form-item label="礼物收益" prop="giftIncome">
          <el-input
            class="modal-input"
            :min="0"
            type="number"
            v-model="liveForm.giftIncome"
            placeholder="请输入礼物收益"
          />
        </el-form-item>
        <el-form-item label="订单数量" prop="orderQuantity">
          <el-input
            class="modal-input"
            :min="0"
            type="number"
            v-model="liveForm.orderQuantity"
            placeholder="请输入订单数量"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open3 = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="直播"
      :visible.sync="open4"
      width="500px"
      append-to-body
      class="details-box"
      center
    >
      <div style="width: 100%;display: flex;justify-content: center">
        <video
          id="player-container-id"
          width="414"
          height="270"
          preload="auto"
          playsinline
          webkit-playsinline
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TCPlayer from 'tcplayer.js'
import 'tcplayer.js/dist/tcplayer.min.css'
import {
  getAllRoom,
  livesRoomUpload,
  platformSettlement,
  userList,
  sendMessage, enableAutomaticLive,
  nonStandardSettlement,
  resolutionAddress
} from '@/api/live/broadcastRoom'

import OssImagePreview from '@/components/ImagePreview/oss-image-preview.vue'
import Template from '@/views/setting/template/index.vue'
import { delList, listList } from '@/api/user/list'

export default {
  name: 'Apply',
  components: { Template, OssImagePreview },
  dicts: ['audit_type'],
  data () {
    return {
      noQualifiedInputId: null,
      formInline: {
        noQualifiedInput: null,
      },
      formInlineRules: {
        noQualifiedInput: [
          { required: true, message: '请输入未达标原因', trigger: 'blur' }
        ],
      },
      streamState: false,
      array: [1],
      inputVisible: false,
      inputValue: '',
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      navTotal: 0,
      // 主播直播带货申请表格数据
      applyList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      open1: false,
      open2: false,
      open3: false,
      open4: false,
      open6: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        anchorName: null,
        livesRoomName: null,
      },
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        userSysType: 0,
      },
      detailsObj: {},
      liveForm: {
        sourceUrls: [],
        sourceType: '带货直播',
      },
      sourceType: null,
      sourceUrls: [],
      arraying: [1],
      streamUrl: [],
      liveType: null,
      inputList: [{ str: '' }],
      rulesAfter: {
        onlineNumber: [
          { required: true, message: '在线人数不能为空', trigger: 'blur' }
        ],
        salesAmount: [
          { required: true, message: '销售额不能为空', trigger: 'change' }
        ],
        salesVolume: [
          { required: true, message: '商品销量不能为空', trigger: 'change' }
        ],
        giftIncome: [
          { required: true, message: '礼物收益不能为空', trigger: 'change' }
        ],
        orderQuantity: [
          { required: true, message: '订单数量不能为空', trigger: 'change' }
        ]
      },
      rulesBefore: {
        sourceType: [
          { required: true, message: '直播类型不能为空', trigger: 'blur' }
        ],
        sourceUrls: [
          { required: true, message: '推流地址不能为空', trigger: 'change' }
        ],
      },
      navList: [],
      selectList: [],
      ids: null,
      liveTypeList: [
        { value: 'PullLivePushLive', label: '普通直播' },
        { value: 'PullVodPushLive', label: '带货' },
      ],
      dynamicTags: [],
    }
  },
  created () {
    this.getList()
    this.navUser()
  },
  methods: {
    // 添加按钮
    add () {
      this.array.push(1)  //通过添加array的值，增加input的个数
      console.log(this.array)
    },
    del (index) {
      this.sourceUrls.splice(index, 1)
      console.log(this.array)   //先删除form中value对应索引的值
      if (this.array.length > 1) {
        this.array.splice(index, 1)  //然后删除array对应索引的值，实现点击删除按钮，减少input框效果
      } else {
        this.$message.error('至少保留一个输入框！')
      }


    },
    expAddress (index) {
      resolutionAddress('?address=' + this.sourceUrls[index]).then(res => {
        console.log(res.data)
        this.sourceUrls[index] = res.data
        this.$forceUpdate()
      })
    },
    // 添加按钮
    adding () {
      this.arraying.push(1)  //通过添加array的值，增加input的个数
    },
    deling (index) {
      this.streamUrl.splice(index, 1)   //先删除form中value对应索引的值
      if (this.arraying.length > 1) {
        this.arraying.splice(index, 1)  //然后删除array对应索引的值，实现点击删除按钮，减少input框效果
      } else {
        this.$message.error('至少保留一个输入框！')
      }


    },
    explainAddress (index) {
      console.log(this.streamUrl[index])
      resolutionAddress('?address=' + this.streamUrl[index]).then(res => {
        console.log(res.data)
        this.streamUrl[index] = res.data
        this.$forceUpdate()
      })

    },
    // 关闭直播
    closeRoom (id) {
      this.$modal.confirm('是否关闭该直播视频').then(function () {
        return closeLive(id)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess(this.$t('delete-success'))
      })
    },
    // 直播前
    handleUpdate (type, row) {
      this.liveType = type
      console.log(row)
      let array = []
      if (type === 1) {
        if (row.liveType == 1) {
          this.sourceType = '带货直播'
          this.liveForm.sourceType = 1
        } else {
          this.sourceType = '娱乐直播'
          this.liveForm.sourceType = 0
        }
        // 有地址时，将值赋值上去
        if (row.streamUrl.length) {
          this.sourceUrls = row.streamUrl
          this.array.push()
          row.streamUrl.map((item, index) => {
            array.push(index)
          })
          this.array = array
        }
        console.log(this.sourceUrls)
        this.open1 = true
      }
      if (type === 2) {
        this.ids = row.liveRoomId
        this.streamState = row.streamState == 1 ? true : false
        this.streamUrl = row.streamUrl
        if (this.streamState == false) {
          this.arraying = [1]
        }
        this.open2 = true
      }
      if (type === 3) this.open3 = true
      this.liveForm = JSON.parse(JSON.stringify(row))
    },
    // 获取水军用户列表
    navUser () {
      userList(this.queryParams1).then(response => {
        this.navList = response.data.records
        console.log('this.navList', this.navList)
        this.navTotal = response.data.total
        this.loading = false
      })
    },
    /** 查询主播直播带货申请列表 */
    getList () {
      this.loading = true
      getAllRoom(this.queryParams).then(response => {
        this.applyList = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    // 修改
    submitForm () {

      if (this.liveType === 1) {
        if (this.sourceUrls.length == 0) {
          this.$message.error('推流地址不能为空！')
        } else {
          this.liveForm.sourceUrls = this.sourceUrls
        }
        this.liveForm.sourceType = this.liveType
        this.$refs['liveFormBefore'].validate(valid => {
          if (valid) {
            let obj = {
              sourceType: 'PullVodPushLive',
              sourceUrls: this.liveForm.sourceUrls,
            }
            let sessionId = this.liveForm.id
            enableAutomaticLive(sessionId, obj).then(res => {
              if (res.success) {
                this.open1 = false
                this.$modal.msgSuccess('修改成功')
                this.getList()
              }
            })
          }
        })
      }
      if (this.liveType === 2) {
        let arr = this.selectList.map(obj => obj.id)
        let obj = {
          sourceType: 'PullVodPushLive',
          sourceUrls: this.streamUrl,
          streamState: this.streamState == true ? '1' : '0'
        }
        let sessionId = this.liveForm.id
        this.open2 = false
      }
      if (this.liveType === 3) {
        this.$refs['liveFormAfter'].validate(valid => {
          if (valid) {
            let obj = {
              id: this.liveForm.id,
              onlineNumber: this.liveForm.onlineNumber,
              salesAmount: this.liveForm.salesAmount,
              salesVolume: this.liveForm.salesVolume,
              giftIncome: this.liveForm.giftIncome,
              orderQuantity: this.liveForm.orderQuantity
            }
            livesRoomUpload(obj).then(res => {
              if (res.success) {
                this.open3 = false
                this.$modal.msgSuccess('修改成功')
                this.getList()
              }
            })
          }
        })
      }
    },
    // 开启关闭推流
    changeSwitch () {
      let obj = {
        sourceType: 'PullVodPushLive',
        sourceUrls: this.streamUrl,
        // streamState:this.streamState==true?'1':'0'
      }
      let sessionId = this.liveForm.id
      enableAutomaticLive(sessionId, obj).then(res => {
        if (res.code === 200) {
          this.getList()
        }
      })

    },
    // 跳转直播
    jumpToing () {
      this.$router.push('/navy/behavior')
    },
    // 平台结算
    Settle (id) {
      this.$modal.confirm('是否结算此直播视频').then(function () {
        return platformSettlement(id)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('结算成功')
      })
    },
    // 未达标结算
    noQualified (row) {
      console.log(row)
      this.formInline.noQualifiedInput = null
      this.open6 = true
      this.noQualifiedInputId = row.id

    },
    noQualifiedInputSubmit () {
      let params = {
        id: this.noQualifiedInputId,
        remark: this.formInline.noQualifiedInput
      }
      let sessionId = this.noQualifiedInputId

      nonStandardSettlement(sessionId + "?remark=" + this.formInline.noQualifiedInput).then((res) => {
        this.open6 = false
        this.getList()
      }).catch(() => {
        this.open6 = false
      })

    },
    // 视频播放
    playVideo (row) {
      this.open4 = true
      setTimeout(() => {
        const player = TCPlayer('player-container-id', {}) // player-container-id 为播放器容器 ID，必须与 html 中一致
        console.log('进入！', row.liveUrl)
        player.src(row.liveUrl) // url 播放地址
      }, 500)
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm('queryForm')
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        userName: null,
        anchorName: null,
        livesRoomName: null
      }
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.selectList = selection
    }
  }
}
</script>
<style lang="scss" scope>
.detials-box {
  .el-table__empty-block {
    height: 200px !important;
  }
}
</style>
